<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="lib/BaiduWebUploader/webuploader.css" type="text/css" rel="stylesheet" />
		<script src="lib/jquery-1.12.4.min.js"></script>
		<script src="lib/BaiduWebUploader/webuploader.min.js"></script>
	</head>

	<body>
		<div id="uploader" class="wu-example">
			<!--用来存放文件信息-->
			<div id="fileList" class="uploader-list"></div>
			<div class="btns">
				<div id="picker">选择文件</div>
				<button id="ctlBtn" class="btn btn-default">开始上传</button>
			</div>
		</div>
		<img src="http://127.0.0.1/MyFrame/file/fileDownload.do?id=402880ff60971316016097136ea50000" />
		<script>
			// 文件基础路径
			var BASE_URL = "";
			// 文件列表
			var $fileList = $("#fileList");
			// 上传按钮
			var $btn = $("#ctlBtn");
			// 当前状态
			var state = "pending";
			// 初始化文件上传
			var uploader = WebUploader.create({
				// swf文件路径
				swf: BASE_URL + 'lib/BaiduWebUploader/Uploader.swf',
				// 文件接收服务端。
				server: 'http://127.0.0.1/billdowney-framework-web/file/fileUpload.do',
				// 选择文件的按钮。可选。
				// 内部根据当前运行是创建，可能是input元素，也可能是flash.
				pick: '#picker',
				// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
				resize: false
			});
			// 当有文件被添加进队列的时候
			uploader.on('fileQueued', function(file) {
				$fileList.append('<div id="' + file.id + '" class="item">' +
					'<h4 class="info">' + file.name + '</h4>' +
					'<p class="state">等待上传...</p>' +
					'</div>');
			});
			// 文件上传过程中创建进度条实时显示。
			uploader.on('uploadProgress', function(file, percentage) {
				var $li = $('#' + file.id);
				var $percent = $li.find('.progress .progress-bar');
				// 避免重复创建
				if(!$percent.length) {
					$percent = $('<div class="progress progress-striped active">' +
						'<div class="progress-bar" role="progressbar" style="width: 0%">' +
						'</div>' +
						'</div>').appendTo($li).find('.progress-bar');
				}
				$li.find('p.state').text('上传中');
				$percent.css('width', percentage * 100 + '%');
			});
			// 文件上传成功执行的方法
			uploader.on('uploadSuccess', function(file) {
				$('#' + file.id).find('p.state').text('已上传');
			});
			// 文件上传失败执行的方法
			uploader.on('uploadError', function(file) {
				$('#' + file.id).find('p.state').text('上传出错');
			});
			// 文件上传完成执行的方法
			uploader.on('uploadComplete', function(file) {
				$('#' + file.id).find('.progress').fadeOut();
			});
			// 绑定状态
			uploader.on('all', function(type) {
				console.log("当前状态：" + type);
				if(type === 'startUpload') {
					state = 'uploading';
				} else if(type === 'stopUpload') {
					state = 'paused';
				} else if(type === 'uploadFinished') {
					state = 'done';
				}

				if(state === 'uploading') {
					$btn.text('暂停上传');
				} else {
					$btn.text('开始上传');
				}
			});
			// 绑定文件上传
			$btn.on('click', function() {
				if(state === 'uploading') {
					uploader.stop();
				} else {
					uploader.upload();
				}
			});
		</script>
	</body>

</html>